@include treelist-ui(
    $ui: 'navigation',
    $padding: 0 10px,

    // Black-ish background color
    $background-color: $panel-navigation-background-color,
    $toolstrip-background-color: #001529,

    $tool-float-indicator-color: $panel-header-background-color,
    $tool-float-indicator-width: 5px,

    $tool-indicator-selected-color: $panel-header-background-color,
    $tool-indicator-selected-width: 5px,
    $tool-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
    //$tool-selected-color: #ffffff,
    //$tool-selected-background-color: $panel-header-background-color,

    // Darker background for expanded subtrees
    $item-expanded-background-color: #000c17,

    // Taller line height
    $item-line-height : $panel-navigation-item-line-height,

    $row-over-background-color: mix(white, $panel-navigation-background-color, 5%),
    $row-selected-background-color: mix(white, $panel-navigation-background-color, 10%),

    // Off-white text
    $item-icon-color: $panel-navigation-item-text-color,
    $item-expander-color: #ffffff,
    $item-text-color: #ffffff,

    // Brighter when hovered
    $item-icon-over-color: #ffffff,
    $item-expander-over-color: #ffffff,
    $item-text-over-color: mix(white, $panel-navigation-item-text-color, 50%),
    $item-text-font-size: 0.8rem,

    // Various sizes for the pieces:
    $item-icon-font-size: 1.04rem,
    $item-icon-width: 22px,
    $item-expander-font-size: 0.8rem,
    $item-expander-width: 18px,

    // Style the "row indicator" (the vertical stripe on the left edge):
    $row-indicator-width: 5px,
    $row-indicator-selected-color: $panel-header-background-color,
    $row-indicator-selected-over-color: lighten($panel-header-background-color, 7%),
    $row-indicator-over-color: transparent
);

.x-treelist-item-text {
    color: #FFFFFF;
    margin-left: 22px;
    margin-right: 18px;
    font-size: 13px;
    line-height: 32px;
    text-overflow: ellipsis;
}